<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>刑法典检索</title>
		<!-- Bootstrap -->
		<link href="./css/bootstrap.min.css" rel="stylesheet">
		<link href="./css/jsmind.css" rel="stylesheet">
		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
		<script src="https://cdn.jsdelivr.net/npm/html5shiv\@3.7.3/dist/html5shiv.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/respond.js\@1.4.2/dest/respond.min.js"></script>
		<![endif]-->
		<style>
			body{
				background-color:rgb(248,248,248);
			}
		blockquote{
			border:1px solid #eee;
			border-left-width: 5px;
			/* border-left-color: #ce4844; */
			border-radius: 3px;
			font-size:15px;
		}
		blockquote:hover {
			border: 1px solid #ce4844;
			border-left-width: 5px;
		}
				.row{
					margin-top: 1em;
				}
				h1{
					text-align: center;
				}
				
				blockquote>p {
					font-size: 20px;
				}
				.content{
					font-weight: normal;
					font-size:15px;
					color:#726c6c;
				}
				.cengci{
					font-weight:bold;
				}
				.yaosu{
					font-weight: normal;
					font-size:15px;
				}
				
				.collapse.in{
					max-height: 250px;
					overflow-y:scroll; 
					overflow-x:scroll;
				}
				.redTxt, .myKeyWord{
					color:red;
				}
			#jsmind_container_A{
				float:left;
				width:1200px;
				height:800px;
			}
            #jsmind_container_B{
                float:left;
                width:1000px;
                height:400px;
            }
			#jsmind_container_C{
				float:left;
				width:1000px;
				height:400px;
			}
			#jsmind_container_D{
				float:left;
				width:1000px;
				height:400px;
			}
		</style>
		
	</head>
	<body>
		<div class="container">
			<h1>刑法专科词汇语义知识库</h1>
			<hr />
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-3">
					<label class="radio-inline">
						<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="r1" checked> 以词语查属性
					</label>
					<label class="radio-inline">
						<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="r2"> 以属性查词语
					</label>
				</div>
				<div class="col-md-5">
					<div class="input-group">
						<form action="/index">

							<input type="text" class="form-control keyWord" data-provide="typeahead" autocomplete="off" placeholder="1. 输入：盗窃；2. 选择下拉文本；3. 点击检索" th:value="${keyWord2}">
							<input type="hidden" name="convictionId" id="convictionId">
							<input type="hidden" name="codeSemanticChunkId" id="codeSemanticChunkId">
							<input type="hidden" name="keyWord" id="keyWord">
							<span class="input-group-btn">
								<button class="btn btn-success query" type="submit"><i class="glyphicon glyphicon-search"></i> 检索</button>
							</span>
						</form>
					</div>
				</div>

			</div>
			<br />



			<ul class="nav nav-tabs nav-justified">
				<li role="presentation" class="active"><a href="#pageA">语义场景框架</a></li>
				<li role="presentation"><a href="#pageB">语义层次</a></li>
				<li role="presentation"><a href="#pageC">判例中的同近义例词</a></li>
				<li role="presentation"><a href="#pageD">判例中的实例</a></li>
				<li role="presentation"><a href="#pageE">判例中词频与互信息</a></li>
				<li role="presentation"><a href="#pageF">相关语义场景框架</a></li>
				<li role="presentation"><a href="#pageG">例句</a></li>
			</ul>

			<div class="tab-content">
				<div class="tab-pane active" id="pageA">

					<div id="jsmind_container_A"></div>
					<br />
					<br />
				</div>

				<div class="tab-pane" id="pageB">
                    <br />
                    <div id="jsmind_container_B"></div>
				</div>

				<div class="tab-pane" id="pageC">
					<br />
					<!--<div class="" id="relationWordList"></div>-->
					<div id="jsmind_container_C"></div>

				</div>

				<div class="tab-pane" id="pageD">
					<br />
					<div id="jsmind_container_D"></div>
				</div>

				<div class="tab-pane" id="pageE" style="align:center;">
					<br />
					<div id="wordFrqMi"></div>


				</div>

				<div class="tab-pane" id="pageF">
					<br />
					<table  class="table table-hover table-responsive table-bordered" style="width: 800px; text-align: center; align:center" align="center" id="xgyycjkj">

					</table>
				</div>

				<div class="tab-pane" id="pageG">
					<br />
					<div class="luceneInfo"></div>
					<div class="lucenePage"></div>
					<div id="lucene"></div>
					<div class="lucenePage"></div>
					<br />
				</div>
			</div>


			<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title">刑法典详情</h4>
						</div>
						<div class="modal-body">
							<p>
								<label>法条：</label><font color="red">诈骗</font>公私财物，数额较大的，处三年以下有期徒刑、拘役或者管制，并处或者单处罚金；数额巨大或者有其他严重情节的，处三年以上十年以下有期徒刑，并处罚金；数额特别巨大或者有其他特别严重情节的，处十年以上有期徒刑或者无期徒刑，并处罚金或者没收财产。本法另有规定的，依照规定。
							</p>
							<p>
								<label>层次关系：</label>侵犯财产罪_<font color="red">诈骗</font>罪
							</p>
							<p>
								<label>语义要素：</label>{行为内容}{行为内容_数量数额}{处罚指称词}{刑种}{刑种}{刑种}{处罚指称词}{刑种}{行为内容_数量数额}{行为内容_情节}{处罚指称词}{刑种}{处罚指称词}{刑种}{行为内容_数量数额}{行为内容_情节}{处罚指称词}{刑种}{刑种}{处罚指称词}{刑种}{刑种}{基础术语}{定罪的依据}
							</p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal-dialog -->
			</div><!-- /.modal -->



	</div>
		

	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="./js/jquery-1.10.1.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="./js/bootstrap.min.js"></script>

	<script src="./js/jsmind.js"></script>
	<script src="./js/jsmind.draggable.js"></script>
	<script src="./js/jsmind.screenshot.js"></script>


	<script>
		var keyWord = "[[${keyWord}]]";

		//缓存文本框输入ID
		var codeSemanticChunkId = "[[${codeSemanticChunkId}]]";

		//罪名ID
		var convictionId = "[[${convictionId}]]";

		$(function() {

			$("input[name='inlineRadioOptions']").click(function () {
				if($(this).val() == "r2"){
					location.href = "/index2";
				}
			});
            try{
                yycjkj();
            }catch (e){
                console.log(e);
            }
            try{
                yycc();
            }catch (e){
                console.log(e);
            }
            try{
                showAdjudgmentWordTree();
            }catch (e){
                console.log(e);
            }
            try{
                sampleEntry();
            }catch (e){
                console.log(e);
            }
            try{
                getWordFrqMiClassRelation();
            }catch (e){
                console.log(e);
            }
            try{
            	if(codeSemanticChunkId!=0){
		            xgyycjkj();
	            }
            }catch (e){
                console.log(e);
            }
			try{
	            if(keyWord!="") {
	                lucene(1);
	            }
			}catch (e){
				console.log(e);
			}
			//导航tab切换
			$('.nav-tabs a').click(function (e) {
				e.preventDefault();
				$(this).tab('show')
			});

			//绑定并监听文本框输入事件
            $(".keyWord").bind("input", function () {
	            $(".typeahead").remove();
	            keyWord = $.trim($(this).val());
                if(keyWord.replace(/[a-zA-Z0-9']+/g, "").length>=1) {
                    $.post("/getInputSeggest/"+keyWord, {}, function (data) {
                        $(".keyWord").after(data);
                    });

                }
            });
		});



		/**
		 * 语义场景框架
		 */
		function yycjkj() {
            var frameNet = new jsMind({
                container:'jsmind_container_A',
                theme:'greensea'
            });
            var mind = $.parseJSON("[[${frameNetJson}]]".replace(/&quot;/g,'"'));
            frameNet.show(mind);
		}

        /**
         * 语义层次
         */
        function yycc() {
            var yycc = new jsMind({
                container:'jsmind_container_B',
                theme:'greensea',
                layout: {
                    hspace: 130,
                    vspace: 80,
                    pspace: 13
                }
            });
            var mind = $.parseJSON("[[${subFrameNetJson}]]".replace(/&quot;/g,'"'));
            yycc.show(mind);
        }

		/**
		 * 根据聚类词，显示相关同义近义词
		 * @param relationWordId
		 */
		function showAdjudgmentWordTree() {
            var adjudgmentWordTree = new jsMind({
                container:'jsmind_container_C',
                theme:'greensea',
                layout: {
                    hspace: 130,
                    vspace: 80,
                    pspace: 13
                }
            });
            var mind = $.parseJSON("[[${adjudgmentWordJson}]]".replace(/&quot;/g,'"'));
            adjudgmentWordTree.show(mind);
		}

		/**
		 * 相关语义场景框架
		 */
		function xgyycjkj() {
			$.post("/xgyycjkj/"+codeSemanticChunkId, {}, function(data){
				$("#xgyycjkj").empty();
				var html = "<tbody>";
				for(var i = 0; i < data.length; i++) {
					html += "<tr><td>"+data[i].conviction.content+"</td></tr>";
				}
				html += "</tbody>";
				$("#xgyycjkj").html(html);
			});
		}

		/**
		 * 判例中的实例
		 */
		function sampleEntry() {
            var sampleEntryTree = new jsMind({
                container:'jsmind_container_D',
                theme:'greensea',
                layout: {
                    hspace: 130,
                    vspace: 80,
                    pspace: 13
                }
            });
            var mind = $.parseJSON("[[${sampleJson}]]".replace(/&quot;/g,'"'));
            sampleEntryTree.show(mind);
		}

		/**
		 * 单击文本框下拉选项事件
		 * @param arg0
		 * @param arg1
		 */
        function selectCodeSemanticChunk(arg0, arg1, arg2) {
	        codeSemanticChunkId = arg0;
			convictionId = arg2;
			keyWord = arg1;
			$("#keyWord").val(arg1);
			$("#convictionId").val(arg2);
			$("#codeSemanticChunkId").val(arg0);
            $(".keyWord").val(arg1);
	        $(".typeahead").remove();
        }

		/**
		 * 获取罪名的相关词
		 */
		function getAdjudgmentRelationWord() {
			if(convictionId!=0){
				$.post("/getAdjudmentRelationWord", {convictionId: convictionId}, function (data) {
					var html = "";
					for(var i = 0; i < data.length; i++) {
						html += "　　<a href=\"javascript:showAdjudgmentWordTree('"+data[i].id+"')\">"+data[i].content+"</a>";
					}
					$("#relationWordList").html(html);
				});
			}
        }



		function getWordFrqMiClassRelation() {
			if(convictionId!=0) {
				$.post("/getWordFrqMiClassRelationIdByConvictionId", {convictionId: convictionId}, function (data) {
					var html = "<div class=''>";
					//console.log(data);
					for(var i = 0; i < data.length; i++) {

						html += "<h5><a href='javascript:getWordFrqMi(" + data[i].classRelation.id + ")'>" + data[i].classRelation.content + "</a></h5><div class='wordFrqMi_"+data[i].classRelation.id+"'></div>";
					}
					html += "</div>";
					$("#wordFrqMi").html(html);
				});
			}
		}

		function getWordFrqMi(arg1) {
			$.post("/getWordFrqMiByconvictionIdAndClassRelationId", {convictionId: convictionId, classRelationId: arg1}, function (data) {
				console.log(data);
				var html = "";
				html = "<table class=\"table table-hover table-responsive table-bordered\" style=\"width: 800px; text-align: center; align:center\" align=\"center\">\n" +
					"<thead>" +
					"<tr>" +
					"<th style=\"text-align: center;\"> 词目 </th>" +
					"<th style=\"text-align: center;\"> 词频 </th>" +
					"<th style=\"text-align: center;\"> 评分 </th>" +
					"</tr>" +
					"</thead>" +
					"<tbody>";
				for(var i = 0; i < data.length; i ++) {
					html += "<tr><td>"+data[i].content+"</td><td>"+data[i].count+"</td><td>"+data[i].score+"</td></tr>";

				}
				html += "</tbody></table><br /><br />";
				$(".wordFrqMi_"+arg1).html(html);
			});
		}

		function lucene(lucenePage) {
			$("#lucene").empty();
			$(".lucenePage").empty();
			$(".luceneInfo").empty();
			$.post("/luceneSearch", {keyWord: keyWord, pageNumber: lucenePage}, function (data) {
				console.log(data);
				var html = "";
				for(var i = 0; i < data.entity.length; i++){
					html += "<blockquote>";
					html += "<p>"+data.entity[i].title+"</p>";
					html += "<p class='content'>"+data.entity[i].content+"</p>";
					html += "</blockquote>";
				}
				$("#lucene").html(html);
				$(".luceneInfo").html("<p class='text-muted'>当前第 "+lucenePage+" 页，每页显示 "+data.pageEntity.pageRowCount+" 条，共 "+data.pageEntity.rowCount+" 条，耗时："+data.usedTime+"ms</p>");
				lucenePageFun(data.pageEntity.currentPage, data.pageEntity.pageCount);
			});
		}

		function lucenePageFun(pageNumber, pages) {
			var pageHtml = "<nav aria-label=\"Page navigation\"><ul class=\"pager\">";

			//上一页
			if(pageNumber-1>=1){
				pageHtml += "<li class='previous'><a href='javascript:lucene("+(pageNumber-1)+")'><span aria-hidden=\"true\">&larr;</span> 上一页</a></li>";
			} else {
				pageHtml += "<li class='previous disabled'><a href='javascript:void(0)'><span aria-hidden=\"true\">&larr;</span> 上一页</a></li>";
			}
			//pageHtml += "<li class=\"active\"><a href=\"javascript:void(0)\">"+pageNumber+" <span class=\"sr-only\">(current)</span></a></li>";
			//下一页
			if(pageNumber>=pages){
				pageHtml += "<li class='next disabled'><a href='javascript:void(0)'>下一页 <span aria-hidden=\"true\">&rarr;</span></a></li>";
			} else {
				pageHtml += "<li class='next'><a href='javascript:lucene("+(pageNumber+1)+")'>下一页 <span aria-hidden=\"true\">&rarr;</span></a></li>";
			}


			pageHtml += "</ul></nav>";
			$(".lucenePage").html(pageHtml);
		}



	</script>
</body>
</html>